<template>
  <div>
    <!-- 顶部导航栏 -->
    <div>
      <ul id="topNav">
        <li><a href="javascript:;">你好啊，大傻贼</a></li>
        <li style="float: right">
          <a class="active"
             href="javascript:;">商家信息</a>
        </li>
        <li style="float: right"><a href="javascript:;">消息中心</a></li>
        <li style="float: right"><a href="javascript:;">首页</a></li>
      </ul>
    </div>

    <!-- 左边导航栏 -->
    <div style="float=left">
      <ul id="leftBar">
        <li>
          <a class="active"
             href="javascript:;"
             v-on:click="selectItem(1)">销售情况</a>
        </li>
        <li>
          <a href="javascript:;"
             v-on:click="selectItem(2)">商品管理</a>
        </li>
        <li>
          <a href="javascript:;"
             v-on:click="selectItem(3)">订单查询</a>
        </li>
      </ul>
    </div>

    <!-- 销售情况视图 -->
    <div style="margin-left: 15%; padding: 1px 16px; height: 1000px"
         v-if="showItem === 1">
      <div class="box">
        <h2>单日交易额：</h2>
        <h1>42.4</h1>
        <img src="http://sem.guanyiyun.com/wp-content/uploads/2019/09/texing-1.png"
             width="150px"
             alt="好累啊" />
      </div>
      <div class="box">
        <h2>总销售量</h2>
        <h1>13</h1>
        <img src="http://sem.guanyiyun.com/wp-content/uploads/2019/09/texing-2.png"
             width="150px"
             alt="好累啊" />
      </div>
      <div class="box">
        <h2>销售总额</h2>
        <h1>{{total()}}</h1>
        <img src="http://sem.guanyiyun.com/wp-content/uploads/2019/09/texing-3.png"
             width="150px"
             alt="好累啊" />
      </div>
      <div class="box">
        <h2>访问量</h2>
        <h1>1000W</h1>
        <img src="http://sem.guanyiyun.com/wp-content/uploads/2019/09/texing-4.png"
             width="150px"
             alt="好累啊" />
      </div>
    </div>

    <!-- 商品信息视图 -->
    <div style="margin-left: 15%; padding: 1px 16px; height: 1000px"
         v-if="showItem === 2">
      <button id="orderBtn"
              @click="update">商品上下架</button>
      <div style="overflow:scroll; height:600px">
        <table id="customers">
          <tr>
            <th>编号</th>
            <th>国药编码</th>
            <th>药品名称</th>
            <th>制药商</th>
            <th>价格</th>
            <th>库存</th>
          </tr>
          <tr v-for="item in medicines"
              :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.serial }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.manufacturer }}</td>
            <td>{{ item.price }}</td>
            <td>
              <button @click="decreaseNum(item)">-</button>
              {{ item.number }}
              <button @click="increaseNum(item)">+</button>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!-- 订单查询视图 -->
    <div style="margin-left: 15%; padding: 1px 16px; height: 1000px"
         v-if="showItem === 3">
      <div style="padding: 15px 0px; ">
        <input type="text"
               name=""
               id="order"
               style="width:200px"
               placeholder="请输入订单号">
        <button style="font-size: 14px; padding: 0px 10px; margin:0px 10px"
                @click="searchOrder">查询</button>
      </div>
      <div style="overflow:scroll; height:600px">
        <table id="order">
          <thead>
            <tr>
              <th>宝贝</th>
              <th>单价</th>
              <th>数量</th>
              <th>实付款</th>
              <th>订单状态</th>
            </tr>
          </thead>
          <tbody>
            <!-- 订单一 -->
            <tr v-if="order==''||order=='12876845120985323'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-07-01</span>
                <span>订单号:12876845120985323</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='12876845120985323'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i2/2928278102/O1CN01ZC0pgR29ilbzoWUPk_!!2928278102-0-sm.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    胡庆余堂 胃复春片0.36g*150片*1瓶/盒治疗术消化胃癌辅助治疗消化不良腹部包块食欲下降消化道溃疡手术慢性浅表性胃炎健脾
                    <p>标准装</p>
                  </div>
                </div>
              </td>
              <td>¥27.5</td>
              <td>1</td>
              <td>¥27.5</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单一 -->
            <tr v-if="order==''||order=='18764745140965846'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-07-01</span>
                <span>订单号:18764745140965846</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='18764745140965846'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i1/2928278102/O1CN0148Ox3r29ilQzl6qMQ_!!2928278102.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【4盒】三九999感冒灵颗粒9袋感冒灵冲剂感冒药咽痛头痛发热鼻塞
                    <p>4盒 999感冒灵</p>
                  </div>
                </div>
              </td>
              <td>¥14.9</td>
              <td>1</td>
              <td>¥14.9</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单一 -->
            <tr v-if="order==''||order=='22975845123465723'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-30</span>
                <span>订单号:22975845123465723</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='22975845123465723'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i2/2928278102/O1CN01ZC0pgR29ilbzoWUPk_!!2928278102-0-sm.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    胡庆余堂 胃复春片0.36g*150片*1瓶/盒治疗术消化胃癌辅助治疗消化不良腹部包块食欲下降消化道溃疡手术慢性浅表性胃炎健脾
                    <p>标准装</p>
                  </div>
                </div>
              </td>
              <td>¥27.5</td>
              <td>1</td>
              <td>¥27.5</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单一 -->
            <tr v-if="order==''||order=='14639845146164723'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-30</span>
                <span>订单号:14639845146164723</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='14639845146164723'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i1/2928278102/O1CN0148Ox3r29ilQzl6qMQ_!!2928278102.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【4盒】三九999感冒灵颗粒9袋感冒灵冲剂感冒药咽痛头痛发热鼻塞
                    <p>4盒 999感冒灵</p>
                  </div>
                </div>
              </td>
              <td>¥14.9</td>
              <td>1</td>
              <td>¥14.9</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单二 -->
            <tr v-if="order==''||order=='18752343388763485'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-29</span>
                <span>订单号:18752343388763485</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='18752343388763485'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i1/2928278102/TB2MHN2hX9gSKJjSspbXXbeNXXa_!!2928278102.png"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    江中健胃消食片消化64片调理肠胃消化不良胃胀气脾虚脾胃虚弱厌食
                    <p>4盒装</p>
                  </div>
                </div>
              </td>
              <td>¥20.0</td>
              <td>2</td>
              <td>¥40.0</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单三 -->
            <tr v-if="order==''||order=='12499764146478453'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-28</span>
                <span>订单号:12499764146478453</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='12499764146478453'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i3/2200728903172/O1CN01l3NfvL1ZIp0fZR44d_!!2200728903172-0-sm.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    仁和阿莫西林胶囊0.25g*40粒/盒大肠埃希菌上呼吸道感染皮肤软组织感染钩端螺旋体病急性支气管炎消化道溃疡幽门螺杆菌葡萄球菌
                    <p>标准装</p>
                  </div>
                </div>
              </td>
              <td>¥14.9</td>
              <td>2</td>
              <td>¥29.8</td>
              <td><a href="#">待收货</a></td>
            </tr>
            <!-- 订单四 -->
            <tr v-if="order==''||order=='12546345146423479'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-28</span>
                <span>订单号:12546345146423479</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='12546345146423479'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i4/2928278102/TB2APZFl0qUQKJjSZFIXXcOkFXa_!!2928278102.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【狂欢价】北京同仁堂口腔溃疡散京制牛黄解毒片10瓶清火片清热解毒上火牙痛
                    <p>8片*10瓶/盒</p>
                  </div>
                </div>
              </td>
              <td>¥22</td>
              <td>1</td>
              <td>¥22</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单五 -->
            <tr v-if="order==''||order=='19065345827323378'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-28</span>
                <span>订单号:19065345827323378</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='19065345827323378'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i4/2928278102/O1CN012Y7pL729ilcAc1N2E_!!2928278102-0-sm.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    美林布洛芬混悬液35ml(30ml:0.6g)儿童普通感冒发热缓解疼痛痛经
                    <p>本品2盒装</p>
                  </div>
                </div>
              </td>
              <td>¥19.9</td>
              <td>1</td>
              <td>¥19.9</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单六 -->
            <tr v-if="order==''||order=='12546247746423479'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-28</span>
                <span>订单号:12546247746423479</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='12546247746423479'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i2/2928278102/O1CN01yWZBcL29ilbyiWXPO_!!2928278102.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【狂欢价】汇仁肾宝片126片男补肾虚肾阳虚汇仁牌肾保片延时阳痿早泄壮阳药
                    <p>套装一：强劲套装*三盒</p>
                  </div>
                </div>
              </td>
              <td>¥19.9</td>
              <td>2</td>
              <td>¥39.8</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单七 -->
            <tr v-if="order==''||order=='13386388854423479'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-27</span>
                <span>订单号:13386388854423479</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='13386388854423479'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i1/2928278102/O1CN01TEZUgI29ilVesBFf1_!!0-item_pic.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    胜艾仙消癌平片0.3g*72片/盒治疗胃癌宫颈癌支气管哮喘消化不良辅助治疗白血病慢性气管炎食道癌健脾益气手术脾胃虚弱放疗消炎
                    <p>标准装</p>
                  </div>
                </div>
              </td>
              <td>¥12.9</td>
              <td>2</td>
              <td>¥12.9/td>
              <td><a href="#">待收货</a></td>
            </tr>
            <!-- 订单八 -->
            <tr v-if="order==''||order=='19986145146875679'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-27</span>
                <span>订单号:19986145146875679</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='19986145146875679'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i1/2928278102/O1CN01P40HZT29ilc6Vhu9P_!!0-item_pic.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    九芝堂六味地黄地丸肾阴虚肾阳虚早泄男性补肾强身六位味地黄地丸
                    <p>6盒*360丸巩固装】多年肾虚持续调理】特惠装HOT】</p>
                  </div>
                </div>
              </td>
              <td>¥99.0</td>
              <td>2</td>
              <td>¥198.8</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单一 -->
            <tr v-if="order==''||order=='99765345146423479'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-26</span>
                <span>订单号:99765345146423479</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='99765345146423479'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i2/2928278102/O1CN01yWZBcL29ilbyiWXPO_!!2928278102.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【狂欢价】汇仁肾宝片126片男补肾虚肾阳虚汇仁牌肾保片延时阳痿早泄壮阳药
                    <p>套装一：强劲套装*三盒</p>
                  </div>
                </div>
              </td>
              <td>¥19.9</td>
              <td>2</td>
              <td>¥39.8</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单一 -->
            <tr v-if="order==''||order=='77642345199765479'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-24</span>
                <span>订单号:77642345199765479</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='77642345199765479'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i1/2928278102/O1CN01TEZUgI29ilVesBFf1_!!0-item_pic.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    胜艾仙消癌平片0.3g*72片/盒治疗胃癌宫颈癌支气管哮喘消化不良辅助治疗白血病慢性气管炎食道癌健脾益气手术脾胃虚弱放疗消炎
                    <p>标准装</p>
                  </div>
                </div>
              </td>
              <td>¥12.9</td>
              <td>2</td>
              <td>¥12.9/td>
              <td><a href="#">待收货</a></td>
            </tr>
            <!-- 订单一 -->
            <tr v-if="order==''||order=='64923345119987579'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-24</span>
                <span>订单号:64923345119987579</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='64923345119987579'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i2/2928278102/O1CN01yWZBcL29ilbyiWXPO_!!2928278102.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【狂欢价】汇仁肾宝片126片男补肾虚肾阳虚汇仁牌肾保片延时阳痿早泄壮阳药
                    <p>套装一：强劲套装*三盒</p>
                  </div>
                </div>
              </td>
              <td>¥19.9</td>
              <td>2</td>
              <td>¥39.8</td>
              <td><a href="#">未发货</a></td>
            </tr>
            <!-- 订单二 -->
            <tr v-if="order==''||order=='21985642847934675'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-23</span>
                <span>订单号:21985642847934675</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='21985642847934675'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i2/2928278102/O1CN01Ihpp2v29ilbztsgYe_!!2928278102.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【买3减50】迪巧维D钙咀嚼片90片孕妇碳酸钙中老年人孕期女性补钙片
                    <p>90片| 全家可用| 官方授权正品</p>
                  </div>
                </div>
              </td>
              <td>¥89.0</td>
              <td>1</td>
              <td>¥89.0</td>
              <td><a href="#">待审核</a></td>
            </tr>
            <!-- 订单三 -->
            <tr v-if="order==''||order=='15609297689024759'"
                id="bgcolor">
              <td colspan="5">
                <span>2020-06-20</span>
                <span>订单号:15609297689024759</span>
              </td>
            </tr>
            <tr v-if="order==''||order=='15609297689024759'"
                id="center">
              <td>
                <div>
                  <div id="picdiv">
                    <a href="#"><img src="https://img.alicdn.com/imgextra/i2/2928278102/O1CN01Us26QV29ilc3l28QK_!!0-item_pic.jpg_430x430q90.jpg"
                           alt=""
                           width="120px" /></a>
                  </div>
                  <div id="divpan">
                    【三盒套装】九芝堂六味地黄丸早泄男性正品补肾肾阴虚强身片六位味地黄丸
                    <p>（360丸×3盒）拍1件，发3盒，一次8丸，一日3次</p>
                  </div>
                </div>
              </td>
              <td>¥48.0</td>
              <td>3</td>
              <td>¥112.0</td>
              <td><a href="#">待审核</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>




<script>
export default {
  name: 'PlatForm',
  data() {
    return {
      name: '大傻贼',
      order: '',
      medicines: [
        {
          id: 'M0001',
          serial: '国药Z44021940',
          name: '感冒灵颗粒',
          manufacturer: '华润三九医药股份有限公司',
          price: 14.9,
          number: 100,
        },
        {
          id: 'M0002',
          serial: '国药Z20040003',
          name: '胡庆余堂胃复春片',
          manufacturer: '杭州胡庆余堂药业有限公司',
          price: 27.5,
          number: 130,
        },
        {
          id: 'M0003',
          serial: '国药H20059173',
          name: '九泰西沙必利片',
          manufacturer: '锦州九泰药业有限责任公司',
          price: 19.9,
          number: 150,
        },
        {
          id: 'M0004',
          serial: '国药Z20043049',
          name: '感冒清热胶囊',
          manufacturer: '吉林敖东集团力源制药股份有限公司',
          price: 24.9,
          number: 200,
        },
        {
          id: 'M0005',
          serial: '国药Z20013220',
          name: '江中健胃消食片',
          manufacturer: '江中药业股份有限公司',
          price: 39.9,
          number: 160,
        },
        {
          id: 'M0006',
          serial: '国药Z43020145',
          name: '九芝堂六味地黄丸',
          manufacturer: '九芝堂股份有限公司',
          price: 9.9,
          number: 400,
        },
        {
          id: 'M0007',
          serial: '国药Z20044281',
          name: '京制牛黄解毒丸',
          manufacturer: '北京同仁堂科技发展股份有限公司制药厂',
          price: 12.9,
          number: 1010,
        },
        {
          id: 'M0008',
          serial: '国药H13024272',
          name: '阿莫西林颗粒',
          manufacturer: '葵花药业集团(衡水)得菲尔有限公司',
          price: 18.5,
          number: 100,
        },
        {
          id: 'M0009',
          serial: '国药Z20054999',
          name: '消癌平片',
          manufacturer: '湖南华纳大药厂有限公司',
          price: 99.9,
          number: 190,
        },
        {
          id: 'M0010',
          serial: '国药H22026193',
          name: '感康(复方氨酚烷胺片)',
          manufacturer: '吉林省吴太感康药业有限公司',
          price: 12,
          number: 1040,
        },
        {
          id: 'M0011',
          serial: '国药准字H20000359',
          name: '美林(布洛芬混悬液)',
          manufacturer: '上海强生制药有限公司',
          price: 18.8,
          number: 30,
        },
        {
          id: 'M0012',
          serial: '国药准字Z44020711',
          name: '999牌正天丸',
          manufacturer: '华润三九医药股份有限公司',
          price: 18,
          number: 1040,
        },
        {
          id: 'M0013',
          serial: '国药准字H20010115',
          name: '泰诺(酚麻美敏片)',
          manufacturer: '上海强生制药有限公司',
          price: 25,
          number: 1040,
        },
        {
          id: 'M0014',
          serial: '国药准字Z20033175',
          name: '降脂减肥片',
          manufacturer: '五0五药业有限公司',
          price: 90,
          number: 1040,
        },
        {
          id: 'M0015',
          serial: '国药准字H14023381',
          name: '人工牛黄甲硝唑胶囊',
          manufacturer: '亚宝药业集团股份有限公司',
          price: 12,
          number: 1040,
        },
        {
          id: 'M0016',
          serial: '国药Z44021940',
          name: '感冒灵颗粒',
          manufacturer: '华润三九医药股份有限公司',
          price: 14.9,
          number: 100,
        },
        {
          id: 'M0017',
          serial: '国药Z20040003',
          name: '胡庆余堂胃复春片',
          manufacturer: '杭州胡庆余堂药业有限公司',
          price: 27.5,
          number: 130,
        },
        {
          id: 'M0018',
          serial: '国药H20059173',
          name: '九泰西沙必利片',
          manufacturer: '锦州九泰药业有限责任公司',
          price: 19.9,
          number: 150,
        },
        {
          id: 'M0019',
          serial: '国药Z20043049',
          name: '感冒清热胶囊',
          manufacturer: '吉林敖东集团力源制药股份有限公司',
          price: 24.9,
          number: 200,
        },
        {
          id: 'M0020',
          serial: '国药Z20013220',
          name: '江中健胃消食片',
          manufacturer: '江中药业股份有限公司',
          price: 39.9,
          number: 160,
        },
        {
          id: 'M0021',
          serial: '国药Z43020145',
          name: '九芝堂六味地黄丸',
          manufacturer: '九芝堂股份有限公司',
          price: 9.9,
          number: 400,
        },
        {
          id: 'M0022',
          serial: '国药Z20044281',
          name: '京制牛黄解毒丸',
          manufacturer: '北京同仁堂科技发展股份有限公司制药厂',
          price: 12.9,
          number: 1010,
        },
        {
          id: 'M0023',
          serial: '国药H13024272',
          name: '阿莫西林颗粒',
          manufacturer: '葵花药业集团(衡水)得菲尔有限公司',
          price: 18.5,
          number: 100,
        },
        {
          id: 'M0024',
          serial: '国药Z20054999',
          name: '消癌平片',
          manufacturer: '湖南华纳大药厂有限公司',
          price: 99.9,
          number: 190,
        },
        {
          id: 'M0025',
          serial: '国药H22026193',
          name: '感康(复方氨酚烷胺片)',
          manufacturer: '吉林省吴太感康药业有限公司',
          price: 12,
          number: 1040,
        },
        {
          id: 'M0026',
          serial: '国药准字H20000359',
          name: '美林(布洛芬混悬液)',
          manufacturer: '上海强生制药有限公司',
          price: 18.8,
          number: 30,
        },
        {
          id: 'M0027',
          serial: '国药准字Z44020711',
          name: '999牌正天丸',
          manufacturer: '华润三九医药股份有限公司',
          price: 18,
          number: 1040,
        },
        {
          id: 'M0028',
          serial: '国药准字H20010115',
          name: '泰诺(酚麻美敏片)',
          manufacturer: '上海强生制药有限公司',
          price: 25,
          number: 1040,
        },
        {
          id: 'M0029',
          serial: '国药准字Z20033175',
          name: '降脂减肥片',
          manufacturer: '五0五药业有限公司',
          price: 90,
          number: 1040,
        },
        {
          id: 'M0030',
          serial: '国药准字H14023381',
          name: '人工牛黄甲硝唑胶囊',
          manufacturer: '亚宝药业集团股份有限公司',
          price: 12,
          number: 1040,
        },
      ],
      showItem: 1,
    }
  },
  methods: {
    update() {
      let Id = prompt('请输入药品编号', 'M0031')
      let Serial = prompt('请输入国编', 'M0031')
      let Name = prompt('请输入药品名称', 'M0031')
      let Manufacturer = prompt('请输入制药厂商', 'M0031')
      let Price = prompt('请输入价格', 'M0031')
      let Number = prompt('请输入库存', 'M0031')
      let medicine = {
        id: Id,
        serial: Serial,
        name: Name,
        manufacturer: Manufacturer,
        price: Price,
        number: Number,
      }
      if (
        Id == M0001 ||
        Id == M0002 ||
        Id == M0003 ||
        Id == M0004 ||
        Id == M0005 ||
        Id == M00031
      ) {
        console.error('请不要重复输入药品编号！！！')
      }
      if (
        Id != null &&
        Id != '' &&
        Serial != null &&
        Serial != '' &&
        Name != null &&
        Name != '' &&
        Manufacturer != null &&
        Manufacturer != '' &&
        Price != null &&
        Price != '' &&
        Number != null &&
        Number != ''
      ) {
        this.medicines.push(medicine)
      } else {
        console.error('信息要填写完整啊！！！！！！！！')
      }
    },
    searchOrder() {
      let getOrder = document.getElementById('order').value
      this.order = getOrder
    },
    decreaseNum(item) {
      item.number--
    },
    increaseNum(item) {
      item.number++
    },
    selectItem(item) {
      this.showItem = item
    },
    total() {
      let sum = 0
      for (let i = 0; i < this.medicines.length; i++) {
        sum = sum + this.medicines[i].price
      }
      return sum.toFixed(2)
    },
  },
}
</script>

<style scoped>
/* topnav样式 */
#topNav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

#topNav li {
  float: left;
}

#topNav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#topNav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4caf50;
}

body {
  margin: 0;
}

/* 左边nav样式 */
#leftBar {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  background-color: #f1f1f1;
  /* position: fixed; */
  height: 1200px;
  overflow: auto;
  font-size: 20px;
}

#leftBar li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

#leftBar li a.active {
  background-color: #4caf50;
  color: white;
}

#leftBar li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.box {
  background: #fff;
  color: #2386ee;
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  padding: 25px 20px;
  width: 180px;
  height: 250px;
  overflow: hidden;
  float: left;
  margin: 15px;
}

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4caf50;
  color: white;
}

/* order的样式 */
#orderBtn {
  display: inline-block;
  padding: 10px 18px;
  font-size: 18px;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4caf50;
  border: none;
  border-radius: 15px;
  box-shadow: 2 2px #999;
  margin-top: 15px;
  margin-bottom: 15px;
}

#orderBtn:hover {
  background-color: #3e8e41;
}

#orderBtn:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#order {
  border: 1px solid rgb(143, 189, 250);
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}
#order th {
  padding: 5px 15px;
}
#order td {
  border: 1px solid rgb(143, 189, 250);
  border-spacing: 0;
  font-size: 14px;
  padding: 10px;
}
#bgcolor {
  background-color: rgb(215, 228, 243);
}
#center {
  text-align: center;
}
#picdiv {
  float: left;
  width: 120px;
  height: 120px;
}
#divpan {
  float: left;
  text-align: left;
  width: 250px;
  padding-left: 15px;
}
</style>
